<script setup lang="ts">
const props = defineProps({
  total: {
    type: Number,
    default: 0,
    require: true
  },
  page:{
    type:Number,
    default:1,
    require:true
  },
  pageSize: {
    type: Number,
    default: 9,
    require: true
  },
})

const emit = defineEmits()
const pages = computed(() => Math.ceil(props.total / props.pageSize))
const currentPage = ref(1)
watch(()=> props.page,() => {currentPage.value = props.page})

const list = computed(() => {
  // 当父组件传递total的值发生变化时，计算属性会重新计算
  // pages = Math.ceil(props.total / props.pagesize)
  const result = []
  // 总页码小于等于5；大于5
  if (pages.value <= 5) {
    // 总页码小于等于5的情况
    for (let i = 1; i <= pages.value; i++) {
      result.push(i)
    }
  } else {
    // 总页码大于5
    if (currentPage.value <= 2) {
      // 左侧临界值
      for (let i = 1; i <= 5; i++) {
        result.push(i)
      }
    } else if (currentPage.value >= pages.value - 1) {
      // 右侧临界值
      for (let i = pages.value - 4; i <= pages.value; i++) {
        result.push(i)
      }
    } else {
      // 中间的状态
      for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
        result.push(i)
      }
    }
  }
  return result
})
const changePage = (type: number | boolean) => {
  if (type === false) {
    // 上一页
    // 页面是第一页时，禁止点击操作
    if (currentPage.value === 1) return
    if (currentPage.value > 1) {
      currentPage.value -= 1
    }
  } else if (type === true) {
    // 下一页
    // 页面是最后页时，禁止点击操作
    if (currentPage.value === pages.value) return
    if (currentPage.value < pages.value) {
      currentPage.value += 1
    }
  } else {
    if (currentPage.value === type) return
    // 点击页码
    currentPage.value = type
  }

  emit('update:page', currentPage.value)
  emit('pagination', currentPage.value)
}
</script>

<template>
  <div class="my-pagination" v-if="pages>1">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}" class="prev-page">
      <img class="black" src="~/assets/icons/to-right-black.png">
    </a>
    <span v-if="currentPage > 3&&currentPage !==1" class="first-page" @click="changePage(1)">首页</span>
<!--    <span v-if='currentPage > 3' class="slv">...</span>-->
   <div>
     <a @click='changePage(item)' href="javascript:;" class="page-nums" :class='{active: currentPage===item}'
        v-for='(item) in list'
        :key='item'>{{ item }}</a>
   </div>
<!--    <span v-if='currentPage < pages - 2' class="slv">...</span>-->
    <span v-if="pages>3&&currentPage!==pages" class="last-page" @click="changePage(pages)">末页</span>
    <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}' class="next-page">
      <img class="black" src="~/assets/icons/to-right-black.png">
    </a>
  </div>
</template>

<style scoped lang="scss">
.my-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.32rem;
  .page-nums{
    &:last-of-type{
      margin-right: 0;
    }
  }

}

.slv {
  font-size: 0.5rem;
  display: inline-block;
  height: 0.65rem;
  width: 0.65rem;
}

.page-nums, .first-page, .last-page {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  text-align: center;
  margin-right: 0.28rem;
  line-height: 1rem;

  &:hover {
    text-shadow: 0 0.05rem 0.19rem 0.01rem rgba(0, 0, 0, 0.08);
  }

  &.active {
    font-size: 0.35rem;
    font-weight: bold;
  }
}

.first-page, .last-page {
  font-size: 0.32rem;
  cursor: pointer;
  line-height: 1rem;
}
.first-page{
  margin-right: 0;
}
.last-page{
  margin-left: 0.2rem;
}

.next-page, .prev-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.65rem;
  height: 0.65rem;

  .white {
    display: none;
  }

  &:hover {

  }

  img {
    display: block;
    width: 0.25rem;
    transform: scale(1.5);
    user-select: none;
  }
}

.prev-page {
  margin-right: 0.2rem;

  img {
    transform: rotate(-180deg) scale(1.5);
    user-select: none;
  }
}
.next-page{
  margin-left: 0.2rem;
}
</style>
